Create react.js development environment and use JSX

I’m going to generate a project on my computer that’s going to more closely emulate how professionally work on react projects rather than using code then we need to generate a new project or new react projects on my / your local computer.

We’re going to go through a couple of different steps each of the steps that you see right here are pretty straightforward but understanding what’s going on is a little bit more challenging.

The first step is to install or update node js, click to below like & download & install this if you are not still now

https://nodejs.org/en/

The second step is to install create-react-app package such as

npm install -g create-react-app and the alternative command is npx create-react-app <name of the project> which is discussed in react.js official doc here.

then got the project through command prompt such as

cd <project name>

then npm start

Now automatically going to localhost:3000

If so then the development environment is ready to develop a react.js app.

Now the part shows some content with JSX & get a better idea of the react.js app.

I’m inside of my code-editor and I’m going to open up my SRC directory. Remember my short term goal is right now to get a better idea of how react.js works. So I want to delete all the code files inside of my SRC directory and I’m going to replace it with one file in which I’m going to experiment to in just a little bit and I we will get a better idea of exactly how react.js work with JSX.

Now create a file in SRC folder such as index.js Now the name of this file is very special. So make sure you call your file index.js as well.

Now when I create this new file I can back to my browser where I have my react application running at localhost:3000 . If I refreshed the page you will notice that it’s now completely white. Nothing at all shows up.

So right now let’s set a very small short term goal. Let’s say that we want to figure out how to user react to get some content to appear on the screen, once we figure out how to get some content to appear on screen using react.js. We will then be able to start to play around with JSX a little bit and get a better idea of the rules around it.

Let’s start to write simple code with JSX