Getting started with ReactJS

We have discussed details of ReactJS that what is react and why to use it, we will continue further about how to use react. If you want to know about react and its benefits visit my previous blog.

In this blog we will be discussing the following:

1. How to set up the environment.
2. Writing our first React JS app.
3. Some common errors that initially you could face.

Setting up a development environment

Install Node JS

1. Visit https://nodejs.org/en/
2. Install the latest version of NodeJS.
3. Update the version of NodeJS if it is already installed.

Install Text Editor

I prefer VS Code as a code editor of development as it helps with syntax highlighting, bracket-matching, auto-indentation, box selection, snippets, and more. You can check more about VS Code from the link below

https://code.visualstudio.com/docs/editor/whyvscode#:~:text=With%20support%20for%20hundreds%20of,navigate%20your%20code%20with%20ease.

1. Visit https://code.visualstudio.com/
2. Install the latest version of VS Code.
3. Update the version of the code editor if it is already installed.

Our First React App (Hello World)

1. Create React App

$ npx create-react-app app-name
$ cd my-app
$ npm start

Initial App — React

Once your app is created successfully your browser will open as the figure above. Open the editor again, on the right side of the editor you will see the file structure as shown below in the figure under Projects.

Code Editor

Under your app name, there will be a list of files that are created initially by default.

2. Editing the Code

In your app drop-down expend src and open the App.js file.

App.js

Copy this simple code to display “Hello World” in App.js, save the file to check your output.

import './App.css';
function App() {
  return (
     <div className="App">
     <h1>Hello World</h1>
     </div>
  );
}
export default App;

Here comes our output screen:

Common Errors

1. When keeping the name of your app make sure that you don't use the camel case convention. Using capital letters in the app will generate an error.

Naming Conventions

2. A template was not provided. This is likely because you’re using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported.

Solution:

$ npm uninstall -g create-react-app
$ npm uninstall create-react-app
$ npx create-react-app app-name

References

https://reactjs.org/docs/getting-started.html

https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3&index=1

https://stackoverflow.com/questions/59188624/template-not-provided-using-create-react-app