ReactJS Part 2 Create React App

Create-react-app

Create React App is the preferred way to create a React Application. NodeJS should be installed prior to executing npm create-react-app. The reason why we install NodeJS is to have npm (Node Package  Manager). Other than that nothing related to NodeJS is required in ReactJS.

 >npx  create-react-app hello-react1

 

 

 

>npm start

 

 

package.json file contains all the dependencies of ReactJS appllication.

src folder contains the source code of your application.

Inside the public folder there is index.html file which is the only html page of the React Single Page application.

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
     <h2>Shalvin P D</h2>
    </div>
  );
}

export default App;

  The basic building block of  React is Component. A component can be written either using class or a function. Here I am creating a functional component called App. JSX is used to create react components. JSX will in turn be converted to JavaScript.

Index.js

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root')
);

Index.js is the first file to execute. Index.js is making using of App component created earlier.

Here App is the root component. Every React app will have one and only root component.

Visual Studio Code

You can use any editor for creating React applications. My preferred choice is Visual Studio Code. Visual Studio Code is a free and feature rich editor with plenty of Extensions.

I will be using ES7+ React/Redux/React-Native snippets for creating ReactJS applications.

 

 

 Creating Component

Inside the src folder I have created at folder called components. Inside the component folder I have created a file called Contact.js. 

 

rfce

 

In  the Contact.js file I typed rfce tab which created the code for a functional component with default export. 

 

Contact.js

function Contacts() {
  return (
    <div>Contacts</div>
  )
}
export default Contacts

function App() {
  return (
    <div className="App">
        <h2>Shalvin P D</h2>
        <Contacts/>
    </div>
  );
}
export default App;

Data

function Contacts() {
    let location = 'Kochi'
  return (
    <div>Located at {location}</div>
  )
}
export default Contacts 

import Contacts from './components/Contacts';

function App() {
  return (
    <div className="App">
        <h2>Shalvin P D</h2>
        <Contacts/>
    </div>
  );
}
export default App;