Skip to main content

Featured

Java Interview Questions for Senior Full Stack Developer

Subscribe to our YouTube Channel to know interview questions

React Part 1 - Create ReactJS App

Install npm

1. Download the Windows installer from the Nodes.js® web site.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
verify the installation

Test npm: To see if NPM is installed
npm -v
This should print NPM’s version number so you’ll see something like this:
5.5.1

Create new react project with npm

1. Create new react project with npm

npx create-react-app my-app
this will create a react app with my-app name.
To run the react app
cd my-app
npm start

2. Create new react project with StackBlitz

https://stackblitz.com
You can code and run the react application on StackBlitz.

Reactjs File Structure

src/App.css
This css file contains the styles required for App.js file

src/App.js
The App component is essentially the top most component in a React-based application, from whom all other components are children of.

src/App.test.js
This file contains the unit test cases of App.js file.

src/index.css
The CSS file corresponding to index.js

src/index.js
This is the javascript file corresponding to index.html. This file has the following line of code which is very significant.

ReactDOM.render(<App />, document.getElementById(root));
The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.
ReactDOM.render(element, container[, callback])
Render a React element into the DOM in the supplied container and return a reference.

package.json
This File has the list of node dependencies which are needed.

React Hello World Example

Why this HTML code is placed in between JavaScript code?

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Lets go to our next tutorial where we will discuss below points :

Part 2 - JSX in React

In this tutorial, we will understand below topics - 
 - What is JSX?
 - How to use JSX in React?
https://onlyfullstack.blogspot.com/2019/11/jsx-in-react.html


Source Code
You can edit and play with the react examples on below stackblitz site - 
https://stackblitz.com/@onlyfullstack

React Tutorial
https://onlyfullstack.blogspot.com/2019/11/react-tutorial.html

Comments

Trending Tutorials

Trending Tutorials

WebSocket With Spring Boot and Angular 6 Tutorial

In this tutorial, we will understand What is WebSocket? Why to use WebSocket? Polling vs Server Sent Events vs WebSocket and WebSocket Example with Spring Boot + Angular 6 + STOMP

Code Coverage with JaCoCo Sonar and Maven

In this tutorial, we will understand the importance of code coverage and how can we setup the Sonar + JaCoCo + Maven to get the code coverage. We will look into Setting up Sonar Server Locally, Integrate JaCoCo plugin with Sonar and Maven for Code Coverage, Find Code Coverage in Eclipse : EclEmma Configuration

Java 8 Features

Learn all about Java 8 features in details

Lambda Expression in Java 8

Ever wonder what Lambda Expression is? What Lambda expressions are compiled to? if no then you should go through this tutorial to know more about Lambda and how they are different than anonymous class.

Popular Posts