Posts

Props in React

 Props in React Example you have component called Navbar.js inside your compoent folder 1. Include the following  inside your component file (Navbar.js)  export default function Navbar ( props ) [NOTE: Just you need to write inside () present there] 2. On exact point where there is text, remove that text and write  {props.title} for eg:   < a className = "navbar-brand" href = "/" > { props . title } </ a > that name called title can be putted according to you, but later you must use the same name in App,js [NOTE: that <a> tag is inside navbar at last you will get all code] 3. Now open App.js and you can write like :      <>       < Navbar title = "Madan" />     </> Now your that <a> text will converted into Madan as link, This will help to work like as in templates at which you can control from App.js 4. If you want multiple props then On Navbar.js     <> ...
Post a Comment
Read more

Running react server 01

 Running react server 1. Create one folder for react project 2. Open that folder from VScode and open terminal 3. Write in terminal: npx create-react-app my-app [if doesnt worked then open CMD from same location and type same code 4. my-app folder will be created inside which there will all items required for running react project 5. Open that folder my-app inside vs code and then open terminal and type : npm start
Post a Comment
Read more

Using bootstrap inside react

 Using bootstrap inside react 1.Navigate folder public and inside that index.html 2. Paste <link> code of bootstrap below <title> for css and paste  <script> codes above </body> for javascript provided by Bootstrap
Post a Comment
Read more

Making Components

 Making Components 1. Create components folder inside src folder 2. Lets create component for navbar, so for that create Navbar.js inside component folder  [NOTE: first letter should always  be capital] 3. Type rfc and hit enter 4. Inside return Build your Navbar, paste bootstrap navbar inside<></> and replace all text "class" with "className" and put /> as a closing tag is the tag doesnt have closing ta (eg : <hr className="dropdown-divider"/>) replace by using CTRL+F also replace [a href="#" to a href="/"] 5. Goto App.js write at top ( import Navbar from './components/Navbar'; ) 6. Write <Navbar/> 7. See your site, from compoenent your navbar has created 8. Similarly create component for different body items and put inside App.js by importing at top [If you put component inside App.js which doesnt exist then Your whole site may look blank]
Post a Comment
Read more