I am following the official reactjs instructions to create a sample app. My node version is 6.9.0.
I created sample react app which is supposed to display a empty tic tac toe table according to the official website using following instructions:
npm install -g create-react-app
create-react-app my-app
cd my-app
changed to my-app directory
removed the default files inside the source directory as directed. Now
my index.js looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Then I ran yarn start
But all I see is blank screen no tic tac toe table. And couple warnings in the console saying
Compiled with warnings.
./src/index.js
Line 1: 'React' is defined but never used no-unused-vars
Line 2: 'ReactDOM' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
You missed last parts in steps 4 & 5:
Add a file named index.css in the src/ folder with this CSS code.
Add a file named index.js in the src/ folder with this JS code.
index.css
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
index.js
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
You should create some component/element/, maybe style it, then call ReactDOM to render your component to the underlying html and then you will have it.
React is used to handle JSX and creation of React component
ReactDOM in your simple case will be used to render created element to dom.
See here : https://reactjs.org/blog/2015/10/01/react-render-and-top-level-api.html
So ading something like
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
to your code, you will get something if in your index.html there is element with id="root" inside <body> tag
This simply means your project has eslint configured to catch unused variables.
If you use JSX or anything React within that file the warning will go away just like suggested by zmii in his answer.
But i am writing this answer because someone showed me their code and they were facing the same problem.
Their code :
import React from 'react';
const person = () => {
return "<h2>I am a person!</h2>"
};
export default person;
The problem in the above code was that while returning, he used double quotes. So instead of JSX, it was returning string and therefore they were getting error that React was never not used.
Conclusion: Syntax are important so keep in mind, specially if you are starting out.
Hope this helps someone.
ESlint needs to be configured to work with React JSX. This excellent article has all the details.
Related
I do make a style in my react project. Like as
style.css:
.headingStyle {
background-color: purple;
text-align: center;
}
and my react component is:
import React from 'react'
import '../cse_component/style.css'
export default function heardTitle() {
return (
<div>
<h1 ClassName='headingStyle'>Todo List</h1>
</div>
)
}
But why I can not change anything in my project?
I think you misstype the className prop. It should be className not ClassName using capital C.
Try changing it from this
<h1 ClassName='headingStyle'>Todo List</h1>
into this:
<h1 className='headingStyle'>Todo List</h1>
I guess there is a typo error on ClassName use className.
import React from 'react'
import '../cse_component/style.css'
export default function heardTitle() {
return (
<div>
<h1 className='headingStyle'>Todo List</h1>
</div>
)
}
For inline css use the code as <h1 style={{ background-color: purple;text-align: center; }} >Todo List</h1>
index.js:
function Home () {
return <div>
<html>
<head>
<title>Site</title>
</head>
<body>
<div class= 'v5_3' onclick = "func_click()"></div>
</body>
</html>
</div>
}
function func_click() {
alert('ALERT!!');
}
export default Home ; func_click
I'm developing locally with nextjs through the npm run dev that I learned through this link
(19:00 ate 21:50) however when I click on the button that is inside the div 'v5_3' which in turn is in the main.css file:
.v5_3 {
width: 150px;
height: 50px;
color: white;
background: rgb(5, 5, 5);
opacity: 1;
position: absolute;
top: 30px;
left: 1171px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
,that is being imported by the _app.js file
:
import './main.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Which in turn are all in the pages folder:
does not execute my alert, which is in function
func_click():
function func_click() {
alert(' ALERT!!');
}
I'm not able to do this interaction with JavaScript, how to solve this?
I believe you know that Next.js is a React.js framework. This means that you need to handle clicks the way React handles them.
Start by defining the function inside the component. This is not mandatory but adds cohesion to your code.
Then reference to the function by using onClick camelcased and the bracket syntax onClick={funcClick} to bind the click function to the div.
For the class use className instead. These elements are not (yet) HTML elements and should be seen as object. With that in mind className is a property of an HTMLElement object.
function Home() {
const funcClick = () => {
alert("ALERT!!");
};
return (
<div>
<html>
<head>
<title>Site</title>
</head>
<body>
<div className="v5_3" onClick={funcClick}></div>
</body>
</html>
</div>
);
}
export default Home;
I'm trying to set the background image of a div depending on the value of a component property, the background doesn't show, however it does show when I harcode the background-image property in the css file.
Here is the component code :
import React, { Component } from "react";
import "./Banner.css";
export default class Banner extends Component {
render() {
const style = {
backgroundImage: `url("${this.props.image}")`,
};
return (
<div className="banner" style={style}>
Chez vous, partout et ailleurs
</div>
);
}
}
Here is the Banner.css file:
.banner {
/* background-image: url("../assets/images/moutains.png"); */
background-size: cover;
height: 170px;
border-radius: 20px;
text-align: center;
vertical-align: middle;
line-height: 170px;
font-size: 2.5rem;
color: #fff;
}
In the parent component:
<Banner image="../assets/images/moutains.png" text="" />
EDIT: Complete code and assets here: https://github.com/musk-coding/kasa
codesandbox: https://codesandbox.io/s/github/musk-coding/kasa
Thanks in advance for your help
Since, you are trying to access the image directly in your Component using the inline CSS. You must move your image to the public folder.
CODESANDBOX LINK: https://codesandbox.io/s/image-relative-path-issue-orbkw?file=/src/components/Home.js
Code Changes:
export default class Home extends Component {
render() {
const imageURL = "./assets/images/island-waves.png";
return (
<div className="container">
<div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
Chez vous, partout et ailleurs
</div>
<Gallery />
</div>
);
}
}
NOTE: From React Docs, you can see the ways to add images in Component. create-reac-app-images-docs. But since you want an inline CSS, in that case we have to move our assets folder into the public folder to make sure that the image is properly referenced with our component.
I am new to React and had everything working before I decided to organize my code in folders and subfolders. Right now I'm getting this Module not found, but it isn't the "Can't resolve 'react' which there were some answers for. Maybe some of you might know this silly thing. Thanks in advance! I really appreciate it!
Here is the Compile error
Image
Here is an image of my folder structure
Here is my Header.js
import React from 'react';
import './Header/CSS/Header.css';
// Class will consist of Header design and structure
const Header = (props) => {
return (
<header className="App-header">
<div className="container">
<button className="btn">
<span>About</span>
</button>
<button className="btn">
<span>Experience</span>
</button>
<button className="btn">
<span>Education</span>
</button>
<button className="btn">
<span>Projects</span>
</button>
<button className="btn">
<span>Contact</span>
</button>
</div>
</header>
)
};
export default Header;
Here is my Header.css
/*
========================
HEADER Component
CSS for the header
========================
*/
.App-header {
background-color: black;
min-height: 05vh;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
padding: 5vw;
}
/*
========================
HEADER BUTTONS
========================
*/
.container {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn {
margin: 5%;
display: inline-flex;
}
Here is my App.js
import React, { Component } from 'react';
import './App.css';
import Header from './Header/js/Header.js';
/*
========================================
App class
Where everything is put together
eg. Skeleton of my website
========================================
*/
class App extends Component {
render() {
return (
<div className="App">
<Header />
</div>
);
}
}
export default App;
It should be
import '../CSS/Header.css';
../ (2 dot) goes back one folder, and ./ (1 dot) stay in the same directory.
Since your structure looks like this:
. src
.. Header
.... CSS
...... Header.css
.... JS
...... Header.js
Using ../ inside Header.js, will take you to the Header folder.
Try changing your import route to import '.. /Header/CSS/Header.css';
Within your config files, such as webpack config or Babel, you will need to use a OS agnostic method of finding files because:
Windows uses \ and everything else uses /
So require Node's built in path module
const path = require('path')
And in your config files use path and __dirname
// "target": "./dist"
"target": path(__dirname, '/dist')
I have a react component that is wrapped up in div:
AccountLogin.jsx:
import './AccountLogin.css';
export default observer(() => (
<div className="content">
Something here
</div>
));
AccountLogin.css:
.content {
color: blue;
background-color: blue;
margin: 500px;
}
But the css doesn't apply to my rendered component AccountLogin.
Any ideas why that could happen?
Looking at rfx-stack source, I can see that files suffixed with .global.css are imported in global scope where as others are imported as css-modules.
So you can either rename your file to AccountLogin.global.css or use the imported class name:
import styles from './AccountLogin.css';
Within component:
<div className={styles.content}>...</div>