React Posts

post

In this article, I show you how to set up react application in Laravel Framework. as you know react is a very flexible frontend library and works with together any backend framework, so let start and follow the following steps. I hope you have created the laravel application.

You can watch the following video tutorial or follow this article as well,

Step 1:

Let's go to the resource directory in laravel. now let's create react application. you should watch the following tutorial if you don't know how to create react application.

Step 2:

Merge the package.json and package-lock.json files in the root. fire npm install && npm run dev command in terminal for compile react application to js.

Step 3:

In this step, you need to set up a webpack.mix.js file. put the following code in the webpack.mix.js file.

mix.options({
  postCss: [
      require('autoprefixer'),
  ],
});

mix.setPublicPath('public');

mix.webpackConfig({
  resolve: {
      extensions: ['.js', '.vue'],
      alias: {
          '@': __dirname + 'resources'
      }
  },
  output: {
      chunkFilename: 'js/chunks/[name].js',
  },
}).react();

// used to run app using reactjs
mix.js('resources/react-app/src/index.js', 'public/js/app.js').version();
mix.copy('resources/react-app/public', 'public');

NOTE: Don't forget to change the index.js path based on your application name

Step 4:

Let's add <div id="root"></div> to your application's root blade file

Step 5:

Let's inlude <script type="text/javascript" src="{{ mix('js/app.js') }}"></script> to your application's root blade file before end the body tag.

So, the Basic setup is done. enjoy react with laravel.

December 15, 20213 minutesauthorShailesh Ladumor
post

In the previous article, we learned 5 areas or tips on Best practices for React JS developer.

In this article, we will learn more about areas or tips

  1. Object Destructuring.
  2. When pass value in props
  3. Tags close it self.
  4. Do not use underscore in any method name.
  5. Use alt in img tag.

Object distracting

You can use object distracting

Not Good

return (
  <>
   {user.firstName}
  </>  
)

Good

const { firstName } = user;
return (
  <>
   {firstName}
  </>  
)

When pass value in props

When pass the data between two component that time use camelCase for prop names.

Not Good

<Home
  UserName="demo"
  phone_number={9898989898}
/>

Good

<Home
  userName="demo"
  phoneNumber={9898989898}
/>

Tags close it self

Any component in not use children so closing it self

Not Good

<Home userName="demo"></Home>

Good

<Home
  userName="demo"
/>

Do not use underscore in any method name

You don't need underscores in any React method.

Not Good

const _onClickHandler = () => {
  // Your code
}

Good

const onClickHandler = () => {
  // Your code
}

Use alt attribute in img tag

Do use alt attribute in the img tag. and don’t use picture or image name in your alt property.

Not Good

<img src="hello.png" />

Good

<img src="hello.png" alt="This is hero image" />
December 01, 20213 MinutesauthorVatsal Sakariya
post

Today we are going to see best practices for React JS developer

  1. Passing a boolean variables.
  2. Do not define a function within a render
  3. Naming of the components
  4. Use of the Ternary Operators
  5. Don’t Need Curly Braces in string

Passing a boolean variables

Passing boolean variables in to two components.

Not Good

return (
   <Home showTitle={true}/>
); 

Good

return (
   <Home showTitle/>
); 

Do not define a function within a render

Don’t define a function inside render.

Not Good

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>
      Example
    </button>  
)

Good

const submitData = () => dispatch(ACTION_TO_SEND_DATA)
return (
  <button onClick={submitData}>  
    Example 
  </button>  
)

Naming of the components

You can use PascalCase for name of the components and camelCase for name of the instances.

Not Good

import createCard from './CreateCard';
const ReservationItem = <ReservationCard />;

Good

import CreateCard from './CreateCard';
const reservationItem = <ReservationCard />;

Use of the Ternary Operators

Developer how can use ternary operator in React js.

Not Good

const { role } = user;
if(role === 'ADMIN') {
  return <AdminUser />
}else{
  return <NormalUser />
} 

Good

const { role } = user;
return role === 'ADMIN' ? <AdminUser /> : <NormalUser />

Don’t Need Curly Braces in string

When developer passing string props to a children component

Not Good

return(
  <Navbar title={"My Special App"} />
)

Good

return(
<Navbar title="My Special App" />  
)

Hope this helps for React js developer

November 06, 20213 MinutesauthorVatsal Sakariya