DEV Community

Cover image for Create React App | Day 4
Jayant
Jayant

Posted on • Updated on

Create React App | Day 4

What

Create React App(CRA) is a command line tool which setups the React Application for us.

Create React App

Why

Starting new React Project is Complicated u have to include a lot of files to be able to write code.

Create React App simplify it using 1 line of code , it setup the React Application for us.

It will automatically download all the files and all the dependencies. Like Babel and Webpack.

What is Webpack πŸ€” ?

  • It is a Module bundler.
  • It will take all your files (JavaScript , CSS etc) and combine them into Single JavaScript file and Single CSS File.
  • When all the files are combined it is easier for the user to download the website faster.
  • Also React uses some new Features of the JavaScript which are in-compatible to the Browser so webpack convert it in that browser understand.

    Like JSX code into plain JavaScript and Import Syntax into what browser understand*.*

How

To set up the React Application u first have to install the node.

Download | Node.js

npx create-react-app my-app
cd my-app
npm start  
Enter fullscreen mode Exit fullscreen mode

After this A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

Skeleton

React

  • Generally we only make changes in the src folder (in this we define all our Component) rest we leave as it is.

Modules

Modules

ES Modules have 2 types of statements β†’ Export and Import

Export

  • we can export a function or a variable from a file.
  • There are 2 types of Exports β†’ named and Default.

Let’s Suppose we have 2 files in src folder , index.js and helpers.js and we want to export from helpers.js and import to index.js.

**Helpers.js**

function helper(){
        console.log('How can I Help you?')
}                                          //**We have this Function to export**

export default helper;          **//This means that when this file is exported this is the main thing that has to exported.

index.js**

import h from './helpers'       **//U can import it by any name if u are using the Default
                                  Export**
h();
Enter fullscreen mode Exit fullscreen mode

Named Export

**Helper.js**

function helper(){
        console.log('How can I Help you?')
}                                         

function Sing(){
        console.log('Sing a Song');
}                               **// We have these Function to Export.

Index.js**

import {helper,Sing} from './helpers';      //**We have used named Export so we have 
                                              to specify the name.**
helper();
Sing();
Enter fullscreen mode Exit fullscreen mode

Mixed (default + named both at one time)

**Helper.js**

function helper(){
        console.log('How can I Help you?')
}                                         

function Sing(){
        console.log('Sing a Song');
}  

function Play() {
  console.log('Let"s play a Game');
} 

export default helper;
export {Sing,Play}  

**Index.js**

import helper, { Sing, Play } from "./helpers";
**// Deafult we don't have to include in the curly braces and named we have to include in the curly braces**
helper();
Sing();
Play();
Enter fullscreen mode Exit fullscreen mode

Try this on Codesandbox πŸ‘†

Default or not

Some Conventions β†’

Styling

**Like,
import React,{Component} form 'react'

//So now we don't have to write like React.Component

class App extends Components{
//This will also work.
}**
Enter fullscreen mode Exit fullscreen mode
  • Including CSS file in the js file

CSS

  • If u have a CSS file named House.css u can import in the House.js file like this πŸ‘‡
import './House.css'
Enter fullscreen mode Exit fullscreen mode
  • including image in the Js file

Image

Happy Coding!☺️

Top comments (2)

Collapse
 
jay818 profile image
Jayant

Day 4 Completed πŸ™‚

Collapse
 
vikashkshatra profile image
vikashkshatra

Thats nice, keep goin your notes are good πŸ‘